<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章编辑</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="md/css/style.css"/>
    <link rel="stylesheet" href="md/css/editormd.css"/>
    <link rel="stylesheet" href="element/element.css">
    <script type="application/javascript" src="md/js/jquery.min.js"></script>
    <script type="application/javascript" src="md/js/editormd.min.js"></script>
    <script type="application/javascript" src="vue/vue.js"></script>
    <script type="application/javascript" src="element/element.js"></script>
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="article-form-panel">
        <el-form :model="articleForm" :rules="rules" ref="articleForm" label-width="auto" class="demo-articleForm">
            <el-form-item prop="title">
                <el-input v-model="articleForm.title" minlength="1" maxlength="50" placeholder="请输入文章标题"></el-input>
            </el-form-item>
            <div class="editormd" id="editor">
                <textarea class="editormd-markdown-textarea"></textarea>
            </div>
            <el-form-item prop="description">
                <el-input type="textarea" minlength="1" maxlength="200" v-model="articleForm.description"
                          placeholder="请输入文章简介"></el-input>
            </el-form-item>
            <el-form-item prop="categoryId">
                <el-select v-model="articleForm.categoryId" placeholder="请选择文章类别">
                    <el-option label="java web" value="shanghai"></el-option>
                    <el-option label="activiti" value="beijing"></el-option>
                    <el-option label="spring mvc" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-tag :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
            </el-form-item>
            <el-form-item>
                <el-label>是否推荐</el-label>
                <el-switch v-model="articleForm.recommend"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('DRAFT')">保存为草稿</el-button>
                <el-button type="primary" @click="submitForm('PUBLISH')">保存并发布</el-button>
                <el-button @click="cancel()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <footer>
        <p>
            <a href="/" target="_blank">{{footer}}</a>
        </p>
    </footer>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var articleEditor;
        var vue = new Vue({
            el: '#app',
            data: {
                footer: '黑色的眼睛 の 个人博客 - 皖ICP备19004316号',
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                articleForm: {
                    title: '',
                    description: '',
                    categoryId: '',
                    labels: '',
                    recommend: false,
                    content: ''
                },
                rules: {
                    title: [
                        {required: true, message: '请输入文章标题', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    categoryId: [
                        {required: true, message: '请选择文章类别', trigger: 'change'}
                    ],
                    description: [
                        {required: true, message: '请填写文章简介', trigger: 'blur'},
                        {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
                    ]
                }
            },
            methods: {
                submitForm(status) {
                    var that = this;
                    this.$refs['articleForm'].validate(function (valid) {
                        if (!valid) {
                            return false;
                        }

                        that.articleForm.content = articleEditor.getMarkdown();
                        that.articleForm.labels = that.dynamicTags.join(",");
                        that.articleForm.status = status;
                        that.save();
                    });
                },
                save() {
                    var that = this;
                    $.post("/article/manage/save", this.articleForm, function (data) {
                        if(data && data.success){
                            that.tipSuccess("保存成功！");
                        }else {
                            that.$message.error("保存失败！");
                        }
                    })
                },
                tipSuccess(message) {
                    this.$message({
                        message: message,
                        type: 'success'
                    });
                },
                cancel() {
                    this.$refs['articleForm'].resetFields();
                },
                handleClose(tag) {
                    this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                },
                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(function () {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },
                handleInputConfirm() {
                    if (this.inputValue) {
                        this.dynamicTags.push(this.inputValue);
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                }
            }
        });

        articleEditor = editormd("editor", {
            height: 600,
            syncScrolling: "single",
            path: "md/lib/",
            codeFold: true,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/upload"
        });
    });
</script>
</html>
